<template> 
    <div>

        <div class="top">
            <input type="text" placeholder="请输入要添加的事项" v-model="addValue"/>
            <div class="btn" @click="addThing">增加</div>
        </div>

        <h3>代办事项</h3>
        <div>
            <div v-for="(i,index) in noDo" :key="index" class="txt_out">
                <span class="txt">{{i}}</span>
                <span class="tag" @click="deleteThing(index,'noDo')">删除</span>
                <span class="tag" @click="doneThing(index,i)">完成</span>
            </div>
        </div>

        
        <h3>已完成事项</h3>
        <div>
            <div v-for="(i,index) in yesDo" :key="index">
                {{i}}
                <span class="tag" @click="deleteThing(index,'yesDo')">删除</span>
                <span class="tag" @click="noDoThing(index,i)">代办</span>
            </div>
        </div>
         
    </div>
</template>
<script>

export default {
    data(){
        return {
            addValue:'',
            noDo:[],
            yesDo:[]
        }
    },
    methods:{
        addThing(){
            //把输入好的事项添加进代办事项的数组中
            this.noDo.push(this.addValue);
            this.addValue = ''
        },
        // 删除事项
        deleteThing(index,type){
            // 要从代办事项的数组中移除
            this[type].splice(index,1)
        },

        // 点击事项已完成按钮
        doneThing(index,i){

            //第一步是把事项添加到已完成数组中
             this.yesDo.push(i)
            //  要从代办事项的数组中移除
             this.noDo.splice(index,1)
        },
        
        // 点击代办按钮
        noDoThing(index,i){
            //第一步是把事项添加到代办事项的数组中
             this.noDo.push(i)
            // 要从已完成事项的数组中移除
             this.yesDo.splice(index,1)
        }
    }
}
</script>
<style>
.top{
    width: 400px;
    overflow: hidden;
}
input{
    float: left;
    width: 300px;
    height: 26px;
}
.btn{
    float: right;
    width: 80px;
    height: 32px;
    line-height: 32px;
    background: palevioletred;
    color: #fff;
    text-align: center;
}
.tag{
    display: inline-block;
    width: 40px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    margin: 0 10px;
    background: #ddd;
}
.txt_out{
    margin-bottom:15px ;
}
.txt{
    width: 200px;
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}

</style>
